<template>
  <view class="comlplaint-one">
    <view class="white-box">
      <!-- 投诉文字说明 -->
      <view class="con-txt">
        投诉该账号存在
        <text>色情、赌博、违禁品、违法犯罪、政治谣言、暴恐血腥等</text>
        等违法违规找行为，提交给平台审核。
      </view>
      <!-- 投诉文字说明 -->
      <!-- 间隔槽 -->
      <u-gap height="10" bgColor="#F5F5F5"></u-gap>
      <!-- 间隔槽 -->
      <!-- 上传图片 -->
      <view class="upload">
        <view class="upload-tit">需收集证据以判定投诉结果</view>
        <view class="upload-tit">上传相关证据（图片/视频）</view>
        <view class="upload-image">
          <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" :maxCount="10" name="1" multiple
            class="image-item"></u-upload>
        </view>
      </view>
      <!-- 上传图片 -->
      <!-- 文本域 -->
      <view class="textarea-box">
        <view class="txt-content">
          <textarea class="textarea" placeholder="投诉内容描述..." maxlength="200" @input="descInput" v-model="desc" />
          <view class="need-num">
            {{ desc.length }}/200
          </view>
        </view>
      </view>
      <!-- 文本域 -->
    </view>
    <view class="button">
      <u-button type="error" text="提交" @click="toSuccess()"></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        fileList1: [{
          url: '/static/resort/need/upload_picture.png'
        }],
        desc: '',
      };
    },
    methods: {
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data)
              }, 1000)
            }
          });
        })
      },
      descInput(e) {
        console.log(e.detail.value.length, '输入的字数')
      },
      toSuccess() {
        uni.navigateTo({
          url: '/pages/message/complaintSuccess'
        })
      }
    }
  }
</script>

<style lang="scss">
  .comlplaint-one {
    width: 100vw;

    .white-box {
      background-color: #FFFFFF;

      // 投诉文字说明
      .con-txt {
        width: 90vw;
        margin: 0 auto;
        font-size: 32rpx;
        line-height: 48rpx;
        padding: 20rpx 0;

        text {
          color: #FD2A31;
        }
      }

      // 上传图片
      .upload {
        width: 90vw;
        margin: 0 auto;
        padding-top: 20rpx;

        .upload-tit {
          text-align: center;
          color: #AEAEAE;
          font-size: 32rpx;
        }

        .upload-image {
          padding: 20rpx 0;
          border-bottom: 1px solid #F5F5F5;
        }
      }

      // 文本域
      .textarea-box {
        width: 90vw;
        margin: 0 auto;
        padding: 10rpx 0;

        .txt-content {
          margin-top: 10rpx;

          .textarea {
            width: 100%;
            height: 240rpx;
          }

          .need-num {
            display: flex;
            justify-content: flex-end;
            color: #DCDCDC;
          }
        }
      }
    }

    .button {
      width: 50vw;
      margin: 100rpx auto;
    }
  }
</style>